<template>
 <div style="margin: 30px 0 0 10px" >
   <h3>请输入添加秒杀商品信息:</h3>

   <el-form ref="form" :model="listPostSeckill.number"  :label-width="formLabelWidth">
     <el-form-item label="秒杀商品的总件数">
       <el-input class="width" v-model="listPostSeckill.number"></el-input>
     </el-form-item>

<!--     <el-form-item label="活动形式" :label-width="formLabelWidth">-->
<!--       <el-input class="width" type="textarea" v-model="listPostSeckill"></el-input>-->
<!--     </el-form-item>-->

     <el-form-item label="选择对应的类型和商品: " :label-width="formLabelWidth">
       <template>
         <el-select v-model="listPostSeckill.categoryId" @change="categoryListTypes(listPostSeckill.categoryId)" placeholder="请选择大类">
           <el-option
             v-for="item in categoryGoodsAddList"
             :key="item.categoryId"
             :label="item.categoryName"
             :value="item.categoryId"
           >
           </el-option>
         </el-select>
       </template>
       <template>
         <el-select v-model="listPostSeckill.goodsType" @change="typesListGoods(listPostSeckill.goodsType)" placeholder="请选择小类">
           <el-option
             v-for="item in typesGoodsAddList"
             :key="item.typeId"
             :label="item.typeName"
             :value="item.typeId">
           </el-option>
         </el-select>
       </template>

       <template>
         <el-select v-model="listPostSeckill.goodsId" placeholder="请选择商品">
           <el-option
             v-for="item in GoodsAddList"
             :key="item.goodsId"
             :label="item.goodsName"
             :value="item.goodsId">
           </el-option>
         </el-select>
       </template>
     </el-form-item>

     <el-form-item label="请选择时间" :label-width="formLabelWidth">
       <div class="block">
         <el-date-picker
           v-model="listPostSeckill.TimeData"
           type="date"
           placeholder="选择日期"
           format="yyyy 年 MM 月 dd 日"
           value-format="yyyy-MM-dd">
         </el-date-picker>
       </div>
     </el-form-item>


     <el-form-item label="请选择时间" :label-width="formLabelWidth">
       <el-time-select
         placeholder="起始时间"
         v-model="listPostSeckill.startTime1"
         :picker-options="{
        start: '00:00',
        step: '00:15',
        end: '23:30'
      }">
       </el-time-select>
       <el-time-select
         placeholder="结束时间"
         v-model="listPostSeckill.endTime1"
         :picker-options="{
        start: '00:00',
        step: '00:15',
        end: '23:30',
        minTime: listPostSeckill.startTime1
      }">
       </el-time-select>
     </el-form-item>


     <el-form-item>
       <el-button type="primary" @click="onSubmit(listPostSeckill)">立即添加</el-button>
       <el-button>取消</el-button>
     </el-form-item>
   </el-form>

 </div>
</template>

<script>
// import { getList } from '@/api/table'
import { categoryList,typesCategoryId } from '@/api/server-goods'
import { goodsTypesId,seckillAdd } from '@/api/server-seckill'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      listPostSeckill: { //添加秒杀商品时提交的数据
        categoryId:null,
        goodsType:null,
        TimeData:null,   //秒杀时间(日期)
        startTime1:null,   //开始秒杀时间
        endTime1:null,     //结束秒杀时间
        number: null,     //秒杀商品的总件数
        goodsId: null

      },
      formLabelWidth: '160px',
      categoryGoodsAddList:null, //所有大类(添加秒杀商品)
      typesGoodsAddList:null, //对应的小类(添加秒杀商品)
      GoodsAddList:null,  //对应的商品（添加秒杀商品）
    }
  },
  created() {
    this.fetchData()
  },
  methods: {


    //点击小类触发对应商品
    typesListGoods(id){
      let that = this;
      that.GoodsAddList = null;
      goodsTypesId(id,function (msg) {
        console.log(msg.data)
        that.GoodsAddList = msg.data;
      })
    },

    //点击大类触发对应小类
    categoryListTypes(id){
      let that = this;
      that.typesGoodsAddList = null;
      typesCategoryId(id,function (msg) {
        that.typesGoodsAddList = msg.data;
      })
    },

    onSubmit(listPostSeckill) {
      let that = this;

      seckillAdd(listPostSeckill,function (msg) {
        // alert(msg.msg);
        if(msg.msg == '添加成功'){
          alert('添加成功');
        }

      })


    },




    fetchData() {
      let that = this;
      categoryList(function(msg){
        that.categoryGoodsAddList = msg.data;
        console.log("categoryGoodsAddList");
        console.log(that.categoryGoodsAddList);


      })



      // this.listLoading = true
      // getList().then(response => {
      //   this.list = response.data.items
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style>
  .width{
    width: 260px;
  }
</style>
